<div class="dialog-container mdl-shadow--8dp mdl-layout--fixed-header SMES-dialog custom-order" ng-init="init();" style="background-color: #fafafa">
    <div class="kmi-header-row">
        <div class="header-title" ng-bind="'customOrder.title' | translate"></div>
        <div class="kmi-side-btn right" ng-click="dialog.back();">
            <!--<img src="image/icons/clear.png"></img>-->
            <i class="material-icons" style="padding-top:5px;font-size:30px;">clear</i>
            <div class="kmi-can-click"></div>
        </div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page">
            <div class="kmi-list">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="flex:0 0 40px;" ng-bind="'customOrder.order' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 150px;" ng-bind="'customOrder.column' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 100px;" ng-bind="'customOrder.sort' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 65px;" ng-bind="'customOrder.adjust' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 40px;" ng-bind="'customOrder.delete' | translate"></div>
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in dialog.settings track by $index">
                        <div class="kmi-list__column column-border" ng-bind="item.order" style="flex:0 0 40px;"></div>
                        <div class="kmi-list__column column-border column-input" style="flex:0 0 150px;">
                            <input type="text" ng-value="item.label || item.code" readonly="readonly" ng-click="dialog.selectColumn($event, item);">
                        </div>
                        <div class="kmi-list__column column-border kmi-column-button" style="flex:0 0 100px;">
                            <div class="kmi-button kmi-button-cancel" ng-click="dialog.changeSort(item);">
                                <i class="material-icons sort" ng-class="{ asc: item.sort === 'asc' }">sort</i>
                                <label ng-bind="'customOrder.ascending' | translate" ng-if="item.sort === 'asc'"></label>
                                <label ng-bind="'customOrder.descending' | translate" ng-if="item.sort === 'desc'"></label>
                                <div class="kmi-can-click"></div>
                            </div>
                        </div>
                        <div class="kmi-list__column column-border adjust" style="flex:0 0 65px;">
                            <button class="sortable-btn mdl-button mdl-js-button mdl-button--icon">
                                <img src="image/icons/change_h.png"></img>
                                <div class="kmi-can-click"></div>
                            </button>
                        </div>
                        <div class="kmi-list__column column-border" style="flex:0 0 40px;">
                            <button class="mdl-button mdl-js-button mdl-button--icon" ng-click="dialog.deleteCol($index)">
                                <img src="image/icons/delete1.png"></img>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sjds-row-display">
                <div class="custom-panel-layout-content-addcol layout-button">
                    <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--icon_prime"
                            ng-click="dialog.addCol()">
                        <img src="image/icons/add.png"></img>
                    </button>
                </div>
            </div>  
            <div class="btn-panel">
                <div class="kmi-button kmi-button-confrim btn-confirm" ng-click="dialog.confirm();"
                     style="width:100px">
                    <label ng-bind="'common.btn.confirm' | translate"></label>
                    <div class="kmi-can-click"></div>
                </div>
            </div>
        </div>
    </div>
</div>